<style type="text/css">
    .progressbar
    {
        position:relative;background:#bbbbbb;width:100%;height:16px;overflow:hidden;
    }
    .progressbar-percent
    {
        position:absolute;height:18px;background:limegreen;left:0;top:0px;overflow:hidden;
        z-index:1;
    }
    .progressbar-label
    {
        position:absolute;left:0;top:0;width:100%;font-size:13px;color:red;
        z-index:10;
        text-align:center;
        height:16px;line-height:16px;
    }
</style>
<fieldset id="fd1" style="width:95%;margin:5px;">
	<legend><span>工单信息查询</span></legend>
	<div class="fieldset-body">
		<table class="form-table" border="0" cellpadding="1" cellspacing="2">
			<tr>
				<td class="form-label" style="width:100px;">施工组织机构:</td>
				<td style="width:150px"><input id="conagency" expandOnLoad="true" class="mini-treeselect" url="/common/agencyOne" multiSelect="false" textField="name" valueField="id" parentField="parent" checkRecursive="true" showFolderCheckBox="true" style="width:100%;"/></td>
				<td class="form-label" style="width:80px;">工单类型:</td>
				<td style="width:100px"><input id="types" class="mini-combobox" textField="name" valueField="id" data="JS.CONST[5]" allowInput="true" style="width:100%;" /></td>
				<td class="form-label" style="width:80px;">工单编号:</td>
				<td style="width:100px"><input id="order_no" class="mini-textbox" emptyText="请输入工单编号" style="width:100%;"/></td>
				<td class="form-label" style="width:80px;">售后单编号:</td>
				<td style="width:100px"><input id="order_id" class="mini-textbox" emptyText="请输入售后单编号" style="width:100%;"/></td>
				<td style="width:80px;"><a class="mini-button" id="search" iconCls="icon-search">查询...</a></td>
			</tr>
		</table>
	</div>
</fieldset>
<div class="mini-toolbar" style="padding:0px;margin:6px 0px 0px 0px;border-bottom:0;width:100%;">
	<table style="width:100%;">
		<tr>
			<td style="width:100%;">
				<a class="mini-button" iconCls="icon-add" id="buttonAdd" onclick="BusinessSchedule()" plain="true">增加进度</a>
				<span class="separator"></span>
				<a class="mini-button" iconCls="icon-search" onClick="BusinessInfo('id')" plain="true">查看工单详情</a>
				<a class="mini-button" iconCls="icon-search" onClick="CustomerInfo('customer_id')" plain="true">查看顾客详情</a>
				<span class="separator"></span>
			</td>
		</tr>
	</table>
</div>
<table style="width:100%;height:75%;">
	<tr>
		<td style="width:100%;height:100%;">
			<div id="grid1" class="mini-datagrid" allowAlternating="true" idField="id" pageSize="20" onselectionchanged="onSelectionChanged" style="width:100%;height:100%;" url="/business/scheduleList" >
				<div property="columns">
					<div type="checkcolumn" headerAlign="center">选择</div>
					<div field="id" width="60" headerAlign="center" allowSort="true">工单编号</div>
					<div field="typename" width="60" headerAlign="center" allowSort="true" align="center">工单类型</div>
					<div field="title" width="80" headerAlign="center">标题</div>
					<div field="schedule" name="schedule" width="120" headerAlign="center">工单内容</div>
					<div field="remark" width="180" headerAlign="center">备注<input property="editor" class="mini-textarea" emptyText="请输入备注" style="width:100%;height:40px;"/></div>
					<div field="statusname" width="80" headerAlign="center" Align="center" allowSort="true">状态</div>
				</div>
			</div>
		</td>
		<td style="width:450px;height:100%;">
			<div id="grid2" class="mini-datagrid" allowAlternating="true" idField="id" pageSize="20" style="width:450px;height:100%;" url="/business/scheduleInfoList" >
				<div property="columns">
					<div type="indexcolumn" headerAlign="center">编号</div>
					<div field="staff" width="80">员工</div>
					<div field="updated" width="140" headerAlign="center" dateFormat="yyyy-MM-dd HH:mm:ss" allowSort="true">进度报告时间</div>
					<div field="schedule" name="schedule"  width="120" headerAlign="center" allowSort="true">设备编号</div>
					<div field="content" width="200" headerAlign="center">备注</div>
				</div>
			</div>
		</td>
	</tr>
</table>
<script type="text/javascript">
mini.parse();
var grid = mini.get("grid1");
grid.load();
var grid2 = mini.get("grid2");

// 选择订单
function onSelectionChanged(e){
	var gridSelection = e.sender;
	var record = gridSelection.getSelected();
	if (record) {
		grid2.load({id:record.id});
	}
}

// 进度条
grid.on("drawcell",function(e){
    var column = e.column;
    var value = e.value;

    if (column.name == "schedule") {
        e.cellHtml = '<div class="progressbar">'
                        + '<div class="progressbar-percent" style="width:' + value + '%;"></div>'
                        + '<div class="progressbar-label">' + value + '%</div>'
                    +'</div>';
    }
});

// 进度条
grid2.on("drawcell",function(e){
    var column = e.column;
    var value = e.value;

    if (column.name == "schedule") {
        e.cellHtml = '<div class="progressbar">'
                        + '<div class="progressbar-percent" style="width:' + value + '%;"></div>'
                        + '<div class="progressbar-label">' + value + '%</div>'
                    +'</div>';
    }
});

// 查询
$("#search").click(function(){
	grid.load({
		id:mini.get("order_no").getValue(),
		order_id:mini.get("order_id").getValue(),
		types:mini.get("types").getValue(),
		con_agency_id:mini.get("conagency").getValue()
	});
});

//领取设备
function BusinessSchedule(){
	var row = grid.getSelected();
	if (row != null) {
		if(row.statuss < 3){
			parent.$.dooDialog.alert("工单尚未派工，不能填写进度！");
			return false;
		}else if(row.statuss >=7){
			parent.$.dooDialog.alert("已经确认完工，不能填写进度！");
			return false;
		}else{
			mini.open({
	            url: "/business/businessSchedule",
	            title: "增加进度记录", width: 530, height:250,
	            onload: function()
	            {
	                var iframe = this.getIFrameEl();
	                var data = { action: "edit",id:row.id,con_agency:row.con_agency_id,schedule:row.schedule};
	                iframe.contentWindow.SetData(data);
	            },
	            ondestroy:function(action)
	            {
					grid.load({
						id:mini.get("order_no").getValue(),
						order_id:mini.get("order_id").getValue(),
						types:mini.get("types").getValue(),
						con_agency_id:mini.get("conagency").getValue()
					});
	            	var record = grid.getSelected();
	            	if (record) {
	            		grid2.load({id:record.id});
	            	}
	            }
	        });
			$(".mini-panel-border .mini-panel-body iframe").css("height","95%");
		}
	} else {
		parent.$.dooDialog.alert("请选中一条记录");
		return false;
	}
}

</script>